<template>
  <div class="book-detail">
    <t-card :bordered="false" class="content-card">
      <template #title>
        <t-space size="18px">
          <h2 class="card-title">库产品查询</h2>
        </t-space>
      </template>
      <template #actions>
        <t-space size="8px">
          <!--<t-button @click="handleAdd" class="add-btn">-->
          <!--  <p class="flex align-center">-->
          <!--    &lt;!&ndash;<i class="iconfont icon-warehousing" style="font-size: 24px;margin-right: 4px"></i>&ndash;&gt;-->
          <!--    新增序列号-->
          <!--  </p>-->
          <!--</t-button>-->
        </t-space>
      </template>

      <div class="filter ">
        <t-space size="12px">
          <t-select style="width: 160px;" v-model="params.warehouse_id" :options="warehouseOptions" clearable @change="getData" placeholder="按仓库筛选">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>
          <t-select style="width: 160px;" v-model="params.status" :options="statusOptions" clearable @change="getData" placeholder="按序列号状态">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>
          <t-input style="width: 220px;" v-model="params.key" clearable @change="changeKey" @enter="getData" placeholder="sn/名称/标签">
            <template #label>
              <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
            </template>
          </t-input>
        </t-space>
      </div>

      <div class="pt16">
        <t-table
          rowKey="id"
          :data="lists"
          :columns="columns"
          :stripe="stripe"
          :bordered="bordered"
          :hover="hover"
          :size="size"
          :max-height="maxHeight"
          :table-layout="tableLayout ? 'auto' : 'fixed'"
          :showHeader="showHeader"
          cellEmptyContent="-"
          resizable
          :loading="loading"
          @page-change="pageChange"
          :pagination="pagination"
          :selected-row-keys="selectedRowKeys"
          @select-change="handleSelectChange"
        >
          <template #title-slot-option></template>
          <template #thumb="{row}">
            <t-image-viewer :images="[row.thumb]" :closeOnEscKeydown="false">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                  <p class="prod-img">
                    <!--<img alt="" :src="row.thumb"/>-->
                    <img alt="图片" src="@/assets/product.png" />
                  </p>
                  <div class="tdesign-demo-image-viewer__ui-image--hover">
                    <span><browse-icon size="1.4em"/> 预览</span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
          </template>
          <template #status="{row}">
            <!--状态（-1 作废；0 不在库；1 在库）-->
            <t-tag v-if="row.status === 1" theme="success" shape="round" variant="light">在库</t-tag>
            <t-tag v-if="row.status === 0" theme="warning" shape="round" variant="light">不在库</t-tag>
            <t-tag v-if="row.status === -1" theme="danger" shape="round" variant="light">作废</t-tag>
          </template>
          <template #option="{row}">
            <t-space size="12px">
              <!--<t-link theme="primary" class="edit-btn-color" hover="color" @click="handleEdit(row)">出入库明细</t-link>-->
              <t-link theme="primary" class="edit-btn-color" style="flex-shrink: 0;" hover="color" @click="handleAdd(row)">配件列表</t-link>
              <t-link theme="warning" class="edit-btn-color" style="flex-shrink: 0;" hover="color" @click="handleHistory(row)">历史追溯</t-link>
            </t-space>
          </template>
        </t-table>
      </div>
    </t-card>
    <!--<div v-if="selectedRowKeys?.length" class="footer">-->
    <!--  <t-space size="12px">-->
    <!--    <t-popconfirm theme="danger" confirm-btn="删除">-->
    <!--      <template #content>-->
    <!--        <div>-->
    <!--          <h3 class="popconfirm-title">确认批量下架？</h3>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--      <t-button theme="default" variant="outline">下架</t-button>-->
    <!--    </t-popconfirm>-->
    <!--    <t-button theme="default" variant="outline">上架</t-button>-->
    <!--  </t-space>-->
    <!--  <t-space size="12px">-->
    <!--    <p class="flex align-center">库存总数：<span class="expenditure">820</span></p>-->
    <!--    <p class="flex align-center">已出库：<span class="income">290</span></p>-->
    <!--  </t-space>-->
    <!--</div>-->

    <serial-list ref="list" @refresh="getData"></serial-list>
    <!-- 历史追朔 -->
    <history-list ref="history"></history-list>
  </div>
</template>

<script lang="jsx">
import {IconFont, CalendarIcon, BrowseIcon} from "tdesign-icons-vue";
import {product_snDeleteApi, product_snListApi} from "@/api/serial-number";
import {warehouseListApi} from "@/api/warehouse";
import IconUAV from "@/components/icon-UAV/index.vue";
import SerialList from "@/pages/inventory/store-product/components/serial-list.vue";
import HistoryList from "@/pages/inventory/store-product/components/history-list.vue";

export default {
  name: 'ManagerIndex',
  components: {HistoryList, SerialList, IconUAV, IconFont, BrowseIcon},
  data() {
    return {
      renderPrefixIcon: () => <CalendarIcon/>,
      params: {
        page: 1,
        limit: 10,
        p_sn_id: '', // 父snID 可选 示例值: 0
        group_id: '', // 分组ID 可选
        warehouse_id: '', // 仓库ID 可选
        product_id: '', // 产品ID 可选
        key: '', // 可选 搜索：sn/名称/标签
        is_del: '', // 可选 删除（1回收站；0正常）
        status: '', // 可选 状态（-1作废；0不在库；1在库）
      },
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'id', title: 'ID', width: 46},
        {colKey: 'product_ean', title: 'EAN条形码', width: 120},
        {colKey: 'product_title', title: '产品名称', width: 220, ellipsis: true},
        //{colKey: 'warehouse_id', title: '仓库ID', width: 120},
        //{colKey: 'group_title', title: '分组名称', width: 120},
        {colKey: 'sn', title: '序列号', width: 220},
        {colKey: 'warehouse_name', title: '所在仓库', width: 140},
        {colKey: 'status', title: '状态', width: 140},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 160},
      ],
      selectedRowKeys: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
      },
      maxHeight: 472,
      loading: false,

      warehouseOptions: [],
      statusOptions: [
        {label: '在库', value: 1},
        {label: '不在库', value: 0},
        {label: '作废', value: -1},
      ],

      timer: null
    };
  },
  mounted() {
    let height = document.documentElement.clientHeight - 244;
    this.maxHeight = height
    window.onresize = () => {
      // 获取屏幕高度 - 顶部高度
      height = document.documentElement.clientHeight - 244;
      this.maxHeight = height
    };

    this.getData()
    this.getWarehouseList();
  },
  methods: {
    // 获取仓库列表
    getWarehouseList() {
      const params = {
        page: 1,
        limit: 999999,
      }
      warehouseListApi(params).then(res => {
        this.warehouseOptions = res.data.map(item=> ({
          label: item.name,
          value: item.id,
        }))
      }).catch(err => {
      }).finally(() => {
        this.loading = false
      })
    },
    // 追溯
    handleHistory(row) {
      this.$refs.history.open(row.id)
    },
    // 添加
    handleAdd(row) {
      this.$refs.list.open(row)
    },
    // 编辑
    handleEdit(row) {
      this.$refs.list.open(row)
    },
    // 复制
    handleCopy(row) {
      this.$refs.list.open(row)
    },
    // 删除
    handleDelete(evt, row) {
      product_snDeleteApi({id: row.id}).then(res => {
        this.$message.success(res.retmsg)
        this.getList()
      }).catch(err => {
        console.log('err', err)
      })
    },
    // 改变搜索关键字
    changeKey() {
      clearTimeout(this.timer)
      this.timer = setTimeout(()=> {
        this.pagination.defaultCurrent = 1
        this.getList()
      }, 500)
    },
    // 获取数据
    getData() {
      this.pagination.defaultCurrent = 1
      this.getList()
    },
    // 获取列表
    getList() {
      this.loading = true
      this.params.page = this.pagination.defaultCurrent
      product_snListApi(this.params).then(res => {
        this.pagination.total = res.count
        this.lists = res.data.map((item, index) => {
          item.index = index + 1
          return item
        })
      }).catch(err => {
      }).finally(() => {
        this.loading = false
      })
    },
    // 切换分页
    pageChange(pageInfo) {
      const {current, defaultCurrent, defaultPageSize,} = pageInfo
      this.pagination.defaultCurrent = current
      this.getList()
    },
    handleSelectChange(value, {selectedRowData}) {
      this.selectedRowKeys = value;
    },
  },
}
</script>

<style lang="less" scoped>
.book-detail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--td-radius-medium);
  background-color: #FFFFFF;
}

/deep/ .content-card {

  .t-card__header {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    padding-bottom: 0;
  }

  .t-card__body {
    padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-m);
  }

  .setting-btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    color: #005687;
  }

  .invite-btn {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: #005687;

    background-color: #F3FBFF;
    border: 1px solid #005687;
    border-radius: var(--td-radius-default);
  }
}

/deep/ .action-btn {
  width: 126px;
  height: 42px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  text-align: left;
  color: #FFFFFF;

  .t-button__text {
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      z-index: 2;
      font-size: 12px;
      font-weight: bold;
      margin-right: 6px;

      &:after {
        position: absolute;
        display: inline-block;
        content: '';
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: var(--td-radius-round);
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
}

.action-btn1 {
  background-color: #14A54E;
  border: 1px solid #14A54E;

  i {
    color: #14A54E;
  }
}

.action-btn2 {
  background-color: #FF5C46;
  border: 1px solid #DFE3E7;
}

.action-btn3 {
  background-color: #565656;
  border: 1px solid #DFE3E7;
}

.action-btn4 {
  color: black;
  background-color: #F9F9F9;
  border: 1px solid #E1E1E1;
}

/deep/ .filter {
  padding-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .t-input, .t-input.t-is-readonly {
    background-color: #F8F8F8;
  }
}

//.import-btn {
//  width: 69px;
//  color: #000000;
//  font-size: 14px;
//  font-weight: 400;
//  line-height: 19.6px;
//  background-color: #F9F9F9;
//  border: 1px solid #E1E1E1;
//}

.income {
  color: #14A54E;
  display: flex;
  align-items: center;

  i {
    width: 17px;
    height: 17px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    background-color: #14A54E;
    border-radius: var(--td-radius-small);
  }
}

.expenditure {
  color: #FF5C46;
  display: flex;
  align-items: center;

  i {
    width: 17px;
    height: 17px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    background-color: #FF5C46;
    border-radius: var(--td-radius-small);
  }
}

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F9F9F9;
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-xl);
  padding-right: var(--td-comp-paddingLR-xxl);
}
</style>
